import React,{ memo, useEffect } from "react";
import { useDispatch } from "react-redux";
import {
    RankingWrapper,
    RankingLeft,
    RankingRight
} from "./style";
import { getLeftRankingListAction } from "./store/actionCreators"

import CJXRankingList from "./c-cpns/left-ranking";
import CJXRankingHeader from "./c-cpns/ranking-header";
import CJXRankingPlayList from "./c-cpns/ranking-list";


export default memo(function CJXRanking () {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getLeftRankingListAction())
    }, [dispatch]);
    return (
        <RankingWrapper className="wrap-v2">
            <RankingLeft>
                <CJXRankingList />
            </RankingLeft>
            <RankingRight>
                <CJXRankingHeader />
                <CJXRankingPlayList />
            </RankingRight>
        </RankingWrapper>
    )
})